<template>
  <div id='app-wrapper'
       :style='{margin:isArticle?"0":"0 0 3rem 0"}'>
    <div id='app-container' class='app-container'>
      <HeaderMain />
      <div class='relative app-main' id="primary">
        <router-view v-slot='{ Component }'>
          <transition name='fade-slide-y' mode='out-in'>
            <component :is='Component' />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
  <Notice/>
  <keep-alive>
    <Footer id='footer'/>
  </keep-alive>
  <UserCenter />
</template>

<script lang='ts'>
import { computed, defineComponent, onBeforeMount, onMounted, reactive, watch } from 'vue'
import { useAppStore } from '@/stores/app'
import HeaderMain from '@/components/Header/src/Header.vue'
import Footer from '@/components/Footer.vue'
import UserCenter from '@/components/UserCenter.vue'
import api from './api/api'
import '@/styles/article/post.css'
import Sun from '@/components/HomeComponents/Sun.vue'
import HomeFull from '@/components/HomeComponents/HomeFull.vue'
import { useRoute } from 'vue-router'
import { description, initFavicon, insertEndHtmlTag, insertHtmlTag, keyWord } from '@/utils/commonUtil'
import Notice from '@/components/HomeComponents/Notice.vue'

export default defineComponent({
  name: 'App',
  components: {
    Notice,
    HomeFull,
    Sun,
    HeaderMain,
    Footer,
    UserCenter
  },
  setup() {
    const route = useRoute()
    const appStore = useAppStore()
    onBeforeMount(() => {
      initialApp()
    })
    onMounted(() => {
      fixedTop()
    })
    const initialApp = () => {
      fetchWebsiteConfig()
      appStore.initializeTheme(appStore.themeConfig.theme)
    }
    const fetchWebsiteConfig = () => {
      api.getWebsiteConfig().then(({ data }) => {
        appStore.viewCount = data.data.viewCount
        appStore.articleCount = data.data.articleCount
        appStore.talkCount = data.data.talkCount
        appStore.friendLinkCount=data.data.friendLinkCount
        appStore.categoryCount = data.data.categoryCount
        appStore.tagCount = data.data.tagCount
        appStore.commentCount = data.data.commentCount
        appStore.websiteConfig = data.data.websiteConfigDTO
        initFavicon(data.data.websiteConfigDTO.favicon)
        description(data.data.websiteConfigDTO.description)
        keyWord(data.data.websiteConfigDTO.keyWords)
        insertHtmlTag(data.data.websiteConfigDTO.htmlTag)
        insertEndHtmlTag(data.data.websiteConfigDTO.footerCode)
      })
    }
    const fixedTop = () => {
      window.addEventListener('scroll', function(e) {
        let t = document.documentElement.scrollTop || document.body.scrollTop
        if (t < 80) {
          document.body.classList.remove('nav-fixed')
        } else {
          document.body.classList.add('nav-fixed')
        }
      })
    }
    watch(route, (to) => {
      if (to.path === '/message') {
        document.body.classList.add('message-single')
      } else {
        document.body.classList.remove('message-single')
      }
    }, { immediate: true })
    return {
      isArticle: computed(() => {
        return route.path.includes('/article') || route.path.includes('/agreement') || route.path.includes('/talks/')
      }),
    }
  }
})
</script>

<style lang='scss'>
.arco-link:hover{
  background: none !important;
}
.emoji-content .el-dialog__header{
  padding: 10px !important;
}
.friend-main .el-dialog .el-dialog__body{
  padding-top: 0.5rem;
}
.el-dialog .el-dialog__header .el-dialog__title{
  font-family: var(--top-font-family);
}
.box_emoticon .el-tabs__nav-scroll {
  margin-left: 1rem;
}

.el-popup-parent--hidden {
  padding-right: 0 !important;
}

.el-overlay-dialog, .el-overlay {
  height: 100vh !important;
}

.arrow-left > .icon,
.arrow-right > .icon {
  display: inline !important;
}

.img-error {
  display: none !important;
}

.el-drawer {
  background-color: var(--background-primary) !important;
}

.el-dialog {
  background-color: var(--h-bg) !important;
}

body {
  background: var(--background-primary-alt);
}

*:focus {
  outline: none;
}

#app {
  @apply relative min-w-full min-h-screen h-full overflow-hidden;
  font-family: var(--top-font-family);

  .app-wrapper {
    @apply min-w-full h-full;
    transition-property: transform, border-radius;
    transition-duration: 350ms;
    transition-timing-function: ease;
    transform-origin: 0 42%;

    .app-container {
      color: var(--text-normal);
    }
  }

  .header-wave {
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 1;
  }

  .App-Mobile-sidebar {
    @apply fixed top-0 bottom-0 left-0;
  }

  .App-Mobile-wrapper {
    @apply relative overflow-y-auto h-full -mr-4 pr-6 pl-4 pt-8 opacity-0;
    transition: all 0.85s cubic-bezier(0, 1.8, 1, 1.2);
    transform: translateY(-20%);
    width: 280px;
  }
}

.app-banner {
  content: '';
  display: block;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.app-banner-image {
  z-index: 1;
  background-size: cover;
  opacity: 0;
  transition: ease-in-out opacity 300ms;
}

.app-banner-screen {
  transition: ease-in-out opacity 300ms;
  z-index: 2;
  opacity: 0.91;
}
</style>
